<template>
  <div class="container">
    <p class="classHead">教师管理</p>
    <!-- 搜索 -->
    <Search
      @parentresetFun="parentresetFun"
      @parentIsshowfun="parentIsshowfun"
      @parentbatch="parentbatch"
      @parentsearchFun="parentsearchFun"
    />
    <!-- 表格 -->
    <TeacherTable
      ref="teachertable"
      @parentidshowfun="parentidshowfun"
      :arr="arr"
      @parentResetFun="getTeacherData"
    />
    <!-- 分页 -->
    <Page :total="total" @restTablefun="getTeacherData" />
    <!-- 弹窗 -->
    <Dialog v-if="isShow" :dialogRow="dialogRow" @resetablefun="getTeacherData" />
  </div>
</template>

<script>
import Search from "./components/Search.vue";
import TeacherTable from "./components/TeacherTable.vue";
import Page from "./components/Page.vue";
import Dialog from "./components/Dialog.vue";
import { getTeacherApi } from "../../api/teacherApi";
export default {
  components: {
    Search,
    TeacherTable,
    Page,
    Dialog,
  },
  data() {
    return {
      isShow: false, //控制弹窗显示和隐藏
      arr: [],
      page: 1, //当前页码
      pageSize: 20, //当前页显示多少条数
      total: 0, //总条数
      searchVal: "", //搜索关键字
      dialogRow: {}, //弹窗对象
      btnType: 0, //0添加按钮 1修改按钮
    };
  },
  mounted() {
    this.getTeacherData();
  },
  methods: {
    parentresetFun() {
      // 重置
      this.$router.go(0);
    },
    parentidshowfun(row) {
      // 修改第一步 控制弹窗 传参
      this.dialogRow = row;

      this.isShow = true;
      this.btnType = 1;
    },
    parentIsshowfun() {
      // 添加第一步
      this.isShow = true;
    },
    parentbatch() {
      // 子调父批量删除函数
      this.$refs.teachertable.batchData(); //调用子组件的函数
    },
    // 父组件搜索事件
    parentsearchFun(val) {
      this.searchVal = val;
      this.getTeacherData();
    },

    getTeacherData() {
      // 分页 page当前页码 pageSize显示当前页多少条
      var params = {
        searchVal: this.searchVal, //搜索关键字
        page: this.page,
        pageSize: this.pageSize,
      };
      getTeacherApi(params).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.arr = res.data;
          this.total = res.total;
        }
      });
    },
  },
};
</script>

<style>
.classHead {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 22px;
}
</style>